<template>
  <div class="login-page u-flex u-col-center u-row-center">
    <div class="login-wrapper u-flex u-col-center u-row-center">
      <a-form-model class="login-form" ref="loginForm" :model="loginForm" :rules="loginRules" :labelCol="{span:6}" :wrapperCol="{span:18}" layout="horizontal">
        <a-form-model-item has-feedback label="用户名" prop="accountNumber">
          <a-input v-model="loginForm.accountNumber" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="密码" prop="password">
          <a-input v-model="loginForm.password" type="password" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 6, offset: 18 }">
          <a-button type="primary" @click="submitLoginForm()">
            登录
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {login} from "../api/index";
export default{
  name:"Login",
  data(){
    return {
      loginForm:{
        accountNumber:"",
        password:""
      },
      loginRules:{
        accountNumber: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      }
    }
  },
  methods:{
    submitLoginForm(){
      this.$refs.loginForm.validate(valid =>{
        if(valid){
          login(this.loginForm).then(data =>{
            this.$router.push({
              name:"person"
            });
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page{
  background: url("../assets/login_bg.png");
  background-size: 100vw 100vh;
  height: 100vh;
  .login-wrapper{
    height: 400px;
    width: 400px;
  }
  .login-form{
    width: 100%;
  }
}
</style>
